<template>
	<div class="login-card">
		<!-- 左侧公司名称 -->
		<div class="company-name">
			山西云欣达OA系统
		</div>

		<!-- 中间登录表单 -->
		<div class="login-form">
			<h2 class="title">登录账户</h2>
			<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large">
				<el-form-item prop="user">
					<el-input v-model="form.user" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')">
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
				</el-form-item>
				<el-form-item prop="code" v-if="verifyCode=='1'">
					<el-input v-model="form.code" clearable :placeholder="$t('login.verifyCode')" style="width: 60%" maxlength="4"></el-input>
					<el-image :src="verifyCodeUrl" style="width: 40%;height: 40px;cursor: pointer;" @click="changeVerifyCode"></el-image>
				</el-form-item>
				<el-form-item style="margin-bottom: 10px;" v-if="findPass=='1'||remUserPass=='1'">
					<el-col :span="12">
						<el-checkbox v-model="form.autologin" :checked="form.autologin" style="color:white;" v-if="remUserPass=='1'">
					<span :style="`color:`+appColor">
						记住密码
					</span>
						</el-checkbox>
					</el-col>
					<el-form-item>
						<el-button type="primary"  :loading="islogin" round @click="login">登录</el-button>
					</el-form-item>
				</el-form-item>
			</el-form>
		</div>

		<!-- 右侧欢迎区域 -->
		<div class="welcome-section">
			<h2>你好，朋友！</h2>
			<p>填写个人信息，开始我们的旅程。</p>
		</div>
	</div>
</template>

<script>
import {ParamEncrypt} from "@/utils/util"
import resetPassword from '../resetPassword'
import CryptoJS from 'crypto-js'
import config from "@/config";
export default {
	props:{
		verifyCode:	{type:String},
		remUserPass:{type:String},
		findPass:{type:String},
		appColor:{type:String},
	},
	components: {
		resetPassword,
	},
	data() {
		return {
			user: "",
			password: "",
			verifyCodeUrl:config.API_URL+'/get/file/getVerifyCodeImage',
			form: {
				user: "",
				password: "",
				code:'',
				autologin: false
			},
			rules: {
				user: [
					{required: true, message: this.$t('login.userError'), trigger: 'blur'}
				],
				password: [
					{required: false, message: this.$t('login.PWError'), trigger: 'blur'}
				],
			},
			islogin: false,
		}
	},
	watch: {
		verifyCode(val) {
			if(val=='1')
			{
				this.rules.code=[
					{required: true, message: this.$t('login.VCError'), trigger: 'blur'}
				]
			}
		}
	},
	mounted() {
		const { username, password } = this.$route.query;
		console.log("Username:", username);
		console.log("password:", password);
		// 参数存在性检查 + 逻辑分层
		if (username && password) {
			// 仅在参数齐全时执行登录逻辑
			this.form.user = username;
			this.form.password = password;
			this.login();
		}
		// const { username, password } = this.$route.query;
		// if (username) this.username = username;
		// if (password) this.password = password;
		// if (!username || !password) {
		// 	console.log("Username:", username); // 任意一个为空时打印 username
		// } else {
		// 	this.form.user = username;
		// 	this.form.password = password;
		// 	this.login();
		// 	console.log("Password:", password); // 都不为空时打印 password
		// }
	    // 监听键盘事件，以支持快捷键登录功能
	    document.onkeydown = (e) => {
	        if (e.defaultPrevented) {
	            return;
	        }
	        const body = document.getElementsByTagName('body')[0];
	        // match(xxxx应填写文件在浏览器中的地址，不需要包括https、http或者www)，这里是为了防止其他页面触发
	        if (e.keyCode === 13 && e.target.baseURI.match("/login") && e.target === body) {
	            this.login(); //需要调用的方法
	        }
	    };
	    // 自动登录逻辑：从cookie中读取自动登录设置
	    this.form.autologin = this.$TOOL.cookie.get("AUTO_LOGIN")=='true'?true:false;
	    // 如果用户选择了自动登录且记住密码，则进行相应的处理
	    if(this.form.autologin&&this.remUserPass=='1')
	    {
	        // 清除可能存在的TOKEN，以确保安全
	        this.$TOOL.cookie.remove("TOKEN");
	        // 从cookie中读取用户名
	        this.form.user = this.$TOOL.cookie.get("ACCOUNT_ID");
	        // 如果密码存在，则进行解密并填充到表单中
	        if(this.$TOOL.cookie.get("PASS_WORD")!='')
	        {
	            this.form.password = this.$TOOL.cookie.get("PASS_WORD");
	        }
	    }
	},
	methods: {
		changeVerifyCode()
		{
			this.verifyCodeUrl = config.API_URL+'/get/file/getVerifyCodeImage?_='+new Date();
		},
		async login() {
			var validate = await this.$refs.loginForm.validate().catch(() => {
			})
			if (!validate) {
				return false
			}
			this.islogin = true
			var data = {
				accountId: this.form.user, // 删除: ParamEncrypt(this.form.user),
				passWord: this.form.password, // 删除: ParamEncrypt(this.form.password),
				code:this.form.code
			}
			//获取token
			var user = await this.$API.auth.token.post(data);
			console.log('user', user);
			if (user.code == 200) {
				console.log('this.form.autologin', this.form.autologin);
				if(this.form.autologin)
				{
					this.$TOOL.cookie.set("ACCOUNT_ID", this.form.user, {
						expires: 24 * 60 * 60
					})
					this.$TOOL.cookie.set("PASS_WORD", this.form.password, { // 删除: CryptoJS.AES.encrypt(this.form.password, this.form.user),
						expires: 24 * 60 * 60
					})
					this.$TOOL.cookie.set("AUTO_LOGIN", this.form.autologin, {
						expires: 24 * 60 * 60
					})
				}else {
					this.$TOOL.cookie.remove("ACCOUNT_ID");
					this.$TOOL.cookie.remove("PASS_WORD");
					this.$TOOL.cookie.remove("AUTO_LOGIN");
				}
				this.$TOOL.cookie.set("TOKEN", user.data.token, {
					expires:24 * 60 * 60
				})
				this.$TOOL.data.set("USER_INFO", user.data.userInfo)
				this.$TOOL.data.set('APP_LANG', user.data.userInfo.language);
				this.$TOOL.data.set('APP_COLOR', user.data.userInfo.theme);
				this.$TOOL.data.set("MSG_TIME",user.data.msgtime);
				this.$TOOL.data.set("WATER_MARK",user.data.waterMark);
				this.$TOOL.data.set("WATER_MARK_CONTENT",user.data.waterMarkContent);
				this.$TOOL.data.set("WATER_MARK_SUBTEXT",user.data.waterMarkSubtext);

				this.islogin = false
			}else if(user.code==-1){
				this.$alert(user.data, "提示", {type: 'error'});
				this.islogin = false;
				return false;
			}else if (user.code == 300) {
				this.$router.replace({
					path: '/system/info'
				})
				return;
			} else if (user.code == 400) {
				this.$router.replace({
					path: '/resetPassword'
				})
				return;
			} else {
				this.islogin = false
				this.$message.warning(user.message)
				return false
			}
			//获取菜单
			console.log('55555555555')
			var menu = await this.$API.system.menu.myMenus.get()
			if (menu.code == 200) {
				if (menu.data.menu.length == 0) {
					this.islogin = false
					this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
						type: 'error',
						center: true
					})
					return false
				}
				this.$TOOL.data.set("MENU", menu.data.menu)
				this.$TOOL.data.set("PERMISSIONS", [
					"list.add",
					"list.edit",
					"list.delete",
					"user.add",
					"user.edit",
					"user.delete"
				])

				/*if(menu.data.menu.length==0){
					this.islogin = false
					this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
						type: 'error',
						center: true
					})
					return false
				}
				this.$TOOL.data.set("MENU", menu.data.menu)
				this.$TOOL.data.set("PERMISSIONS", menu.data.permissions)*/
			} else {
				this.islogin = false
				this.$message.warning(menu.message)
				return false
			}
			this.$router.replace({
				path: '/'
			})
			this.$message.success("Login Success 登录成功")
			this.islogin = false
		},
	}
}
</script>
<style lang="scss">

.login-container {
	.el-input__inner {
		height: 50px;
		line-height: 50px;
		width: 240px;
		border-radius: 10px;
	}
}

.container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f0f2f5;
}

.login-card {
	display: flex;
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	width: 1000px;
	height: 600px;
}

.company-name {
	padding: 20px;
	color: #0052d9;
	font-weight: bold;
	position: absolute;
	font-size: 24px;
}

.login-form {
	flex: 1;
	padding: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.title {
	font-size: 24px;
	color: #333;
	margin-bottom: 30px;
}

.welcome-section {
	background: #0052d9;
	padding: 40px;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 40%;
}

.sign-in-btn {
	width: 100%;
	height: 50px;
	margin-top: 20px;
	background: #0052d9;
	border: none;
}

.form-footer {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 20px 0;
}

.show-pwd {
	cursor: pointer;
	color: #889aa4;
}

.show-pwd:hover {
	color: #409eff;
}

.input-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* 移除所有动画相关样式 */
</style>
<!--<template>-->
<!--	<div class="login-card">-->
<!--      &lt;!&ndash; 左侧公司名称 &ndash;&gt;-->
<!--      <div class="company-name">-->
<!--        	山西云欣达OA系统-->
<!--      </div>-->

<!--      &lt;!&ndash; 中间登录表单 &ndash;&gt;-->
<!--      <div class="login-form">-->
<!--        <h2 class="title">登录账户</h2>-->
<!--			<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large">-->
<!--				<el-form-item prop="user">-->
<!--					<el-input v-model="form.user" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')">-->
<!--				</el-input>-->
<!--			</el-form-item>-->
<!--			<el-form-item prop="password">-->
<!--				<el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>-->
<!--			</el-form-item>-->
<!--			<el-form-item prop="code" v-if="verifyCode=='1'">-->
<!--				<el-input v-model="form.code" clearable :placeholder="$t('login.verifyCode')" style="width: 60%" maxlength="4"></el-input>-->
<!--				<el-image :src="verifyCodeUrl" style="width: 40%;height: 40px;cursor: pointer;" @click="changeVerifyCode"></el-image>-->
<!--			</el-form-item>-->
<!--			<el-form-item style="margin-bottom: 10px;" v-if="findPass=='1'||remUserPass=='1'">-->
<!--			<el-col :span="12">-->
<!--				<el-checkbox v-model="form.autologin" :checked="form.autologin" style="color:white;" v-if="remUserPass=='1'">-->
<!--					<span :style="`color:`+appColor">-->
<!--						记住密码-->
<!--					</span>-->
<!--					</el-checkbox>-->
<!--			</el-col>-->
<!--			&lt;!&ndash; <el-col :span="12" class="login-forgot">-->
<!--				<router-link to="/forget_password" v-if="findPass=='1'" :style="`font-weight:500;color:`+appColor">{{ $t('login.forgetPassword') }}？</router-link>-->
<!--			</el-col> &ndash;&gt;-->
<!--			<el-form-item>-->
<!--				<el-button type="primary"  :loading="islogin" round @click="login">登录</el-button>-->
<!--			</el-form-item>-->
<!--		</el-form-item>-->
<!--		</el-form>-->
<!--      </div>-->

<!--      &lt;!&ndash; 右侧欢迎区域 &ndash;&gt;-->
<!--      <div class="welcome-section">-->
<!--        <h2>你好，朋友！</h2>-->
<!--        <p>填写个人信息，开始我们的旅程。</p>-->
<!--        &lt;!&ndash; <el-button class="sign-up-btn" type="outlined">-->
<!--          Sign Up-->
<!--        </el-button> &ndash;&gt;-->
<!--      </div>-->
<!--    </div>-->
<!--</template>-->
<!--<script>-->
<!--import {ParamEncrypt} from "@/utils/util"-->
<!--import resetPassword from '../resetPassword'-->
<!--import CryptoJS from 'crypto-js'-->
<!--import config from "@/config";-->
<!--export default {-->
<!--	props:{-->
<!--		verifyCode:	{type:String},-->
<!--		remUserPass:{type:String},-->
<!--		findPass:{type:String},-->
<!--		appColor:{type:String},-->
<!--	},-->
<!--	components: {-->
<!--		resetPassword,-->
<!--	},-->
<!--	data() {-->
<!--		return {-->
<!--			user: "",-->
<!--			password: "",-->
<!--			verifyCodeUrl:config.API_URL+'/get/file/getVerifyCodeImage',-->
<!--			form: {-->
<!--				user: "",-->
<!--				password: "",-->
<!--				code:'',-->
<!--				autologin: false-->
<!--			},-->
<!--			rules: {-->
<!--				user: [-->
<!--					{required: true, message: this.$t('login.userError'), trigger: 'blur'}-->
<!--				],-->
<!--				password: [-->
<!--					{required: false, message: this.$t('login.PWError'), trigger: 'blur'}-->
<!--				],-->
<!--			},-->
<!--			islogin: false,-->
<!--		}-->
<!--	},-->
<!--	watch: {-->
<!--		verifyCode(val) {-->
<!--			if(val=='1')-->
<!--			{-->
<!--				this.rules.code=[-->
<!--					{required: true, message: this.$t('login.VCError'), trigger: 'blur'}-->
<!--				]-->
<!--			}-->
<!--		}-->
<!--	},-->
<!--	mounted() {-->
<!--		const { username, password } = this.$route.query;-->
<!--		console.log("Username:", username);-->
<!--		console.log("password:", password);-->
<!--		// 参数存在性检查 + 逻辑分层-->
<!--		if (username && password) {-->
<!--			// 仅在参数齐全时执行登录逻辑-->
<!--			this.form.user = username;-->
<!--			this.form.password = password;-->
<!--			this.login();-->
<!--		}-->
<!--		// const { username, password } = this.$route.query;-->
<!--		// if (username) this.username = username;-->
<!--		// if (password) this.password = password;-->
<!--		// if (!username || !password) {-->
<!--		// 	console.log("Username:", username); // 任意一个为空时打印 username-->
<!--		// } else {-->
<!--		// 	this.form.user = username;-->
<!--		// 	this.form.password = password;-->
<!--		// 	this.login();-->
<!--		// 	console.log("Password:", password); // 都不为空时打印 password-->
<!--		// }-->
<!--	    // 监听键盘事件，以支持快捷键登录功能-->
<!--	    document.onkeydown = (e) => {-->
<!--	        if (e.defaultPrevented) {-->
<!--	            return;-->
<!--	        }-->
<!--	        const body = document.getElementsByTagName('body')[0];-->
<!--	        // match(xxxx应填写文件在浏览器中的地址，不需要包括https、http或者www)，这里是为了防止其他页面触发-->
<!--	        if (e.keyCode === 13 && e.target.baseURI.match("/login") && e.target === body) {-->
<!--	            this.login(); //需要调用的方法-->
<!--	        }-->
<!--	    };-->
<!--	    // 自动登录逻辑：从cookie中读取自动登录设置-->
<!--	    this.form.autologin = this.$TOOL.cookie.get("AUTO_LOGIN")=='true'?true:false;-->
<!--	    // 如果用户选择了自动登录且记住密码，则进行相应的处理-->
<!--	    if(this.form.autologin&&this.remUserPass=='1')-->
<!--	    {-->
<!--	        // 清除可能存在的TOKEN，以确保安全-->
<!--	        this.$TOOL.cookie.remove("TOKEN");-->
<!--	        // 从cookie中读取用户名-->
<!--	        this.form.user = this.$TOOL.cookie.get("ACCOUNT_ID");-->
<!--	        // 如果密码存在，则进行解密并填充到表单中-->
<!--	        if(this.$TOOL.cookie.get("PASS_WORD")!='')-->
<!--	        {-->
<!--	            this.form.password = this.$TOOL.cookie.get("PASS_WORD");-->
<!--	        }-->
<!--	    }-->
<!--	},-->
<!--	methods: {-->
<!--		changeVerifyCode()-->
<!--		{-->
<!--			this.verifyCodeUrl = config.API_URL+'/get/file/getVerifyCodeImage?_='+new Date();-->
<!--		},-->
<!--		async login() {-->
<!--			var validate = await this.$refs.loginForm.validate().catch(() => {-->
<!--			})-->
<!--			if (!validate) {-->
<!--				return false-->
<!--			}-->
<!--			this.islogin = true-->
<!--			var data = {-->
<!--				accountId: this.form.user, // 删除: ParamEncrypt(this.form.user),-->
<!--				passWord: this.form.password, // 删除: ParamEncrypt(this.form.password),-->
<!--				code:this.form.code-->
<!--			}-->
<!--			//获取token-->
<!--			var user = await this.$API.auth.token.post(data);-->
<!--			console.log('user', user);-->
<!--			if (user.code == 200) {-->
<!--				console.log('this.form.autologin', this.form.autologin);-->
<!--				if(this.form.autologin)-->
<!--				{-->
<!--					this.$TOOL.cookie.set("ACCOUNT_ID", this.form.user, {-->
<!--						expires: 24 * 60 * 60-->
<!--					})-->
<!--					this.$TOOL.cookie.set("PASS_WORD", this.form.password, { // 删除: CryptoJS.AES.encrypt(this.form.password, this.form.user),-->
<!--						expires: 24 * 60 * 60-->
<!--					})-->
<!--					this.$TOOL.cookie.set("AUTO_LOGIN", this.form.autologin, {-->
<!--						expires: 24 * 60 * 60-->
<!--					})-->
<!--				}else {-->
<!--					this.$TOOL.cookie.remove("ACCOUNT_ID");-->
<!--					this.$TOOL.cookie.remove("PASS_WORD");-->
<!--					this.$TOOL.cookie.remove("AUTO_LOGIN");-->
<!--				}-->
<!--				this.$TOOL.cookie.set("TOKEN", user.data.token, {-->
<!--					expires:24 * 60 * 60-->
<!--				})-->
<!--				this.$TOOL.data.set("USER_INFO", user.data.userInfo)-->
<!--				this.$TOOL.data.set('APP_LANG', user.data.userInfo.language);-->
<!--				this.$TOOL.data.set('APP_COLOR', user.data.userInfo.theme);-->
<!--				this.$TOOL.data.set("MSG_TIME",user.data.msgtime);-->
<!--				this.$TOOL.data.set("WATER_MARK",user.data.waterMark);-->
<!--				this.$TOOL.data.set("WATER_MARK_CONTENT",user.data.waterMarkContent);-->
<!--				this.$TOOL.data.set("WATER_MARK_SUBTEXT",user.data.waterMarkSubtext);-->

<!--				this.islogin = false-->
<!--			}else if(user.code==-1){-->
<!--				this.$alert(user.data, "提示", {type: 'error'});-->
<!--				this.islogin = false;-->
<!--				return false;-->
<!--			}else if (user.code == 300) {-->
<!--				this.$router.replace({-->
<!--					path: '/system/info'-->
<!--				})-->
<!--				return;-->
<!--			} else if (user.code == 400) {-->
<!--				this.$router.replace({-->
<!--					path: '/resetPassword'-->
<!--				})-->
<!--				return;-->
<!--			} else {-->
<!--				this.islogin = false-->
<!--				this.$message.warning(user.message)-->
<!--				return false-->
<!--			}-->
<!--			//获取菜单-->
<!--			console.log('55555555555')-->
<!--			var menu = await this.$API.system.menu.myMenus.get()-->
<!--			if (menu.code == 200) {-->
<!--				if (menu.data.menu.length == 0) {-->
<!--					this.islogin = false-->
<!--					this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {-->
<!--						type: 'error',-->
<!--						center: true-->
<!--					})-->
<!--					return false-->
<!--				}-->
<!--				this.$TOOL.data.set("MENU", menu.data.menu)-->
<!--				this.$TOOL.data.set("PERMISSIONS", [-->
<!--					"list.add",-->
<!--					"list.edit",-->
<!--					"list.delete",-->
<!--					"user.add",-->
<!--					"user.edit",-->
<!--					"user.delete"-->
<!--				])-->

<!--				/*if(menu.data.menu.length==0){-->
<!--					this.islogin = false-->
<!--					this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {-->
<!--						type: 'error',-->
<!--						center: true-->
<!--					})-->
<!--					return false-->
<!--				}-->
<!--				this.$TOOL.data.set("MENU", menu.data.menu)-->
<!--				this.$TOOL.data.set("PERMISSIONS", menu.data.permissions)*/-->
<!--			} else {-->
<!--				this.islogin = false-->
<!--				this.$message.warning(menu.message)-->
<!--				return false-->
<!--			}-->
<!--			this.$router.replace({-->
<!--				path: '/'-->
<!--			})-->
<!--			this.$message.success("Login Success 登录成功")-->
<!--			this.islogin = false-->
<!--		},-->
<!--	}-->
<!--}-->
<!--</script>-->

<!--<style lang="scss">-->
<!--/* Element UI 覆盖样式 */-->

<!--.login-container {-->
<!--  .el-input__inner {-->
<!--    height: 50px;-->
<!--    line-height: 50px;-->
<!--    width: 240px;-->
<!--    border-radius: 10px;-->
<!--  }-->
<!--}-->

<!--/* 保持现有样式不变，添加以下背景装饰样式 */-->

<!--.background-decoration {-->
<!--  position: fixed;-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  overflow: hidden;-->
<!--  z-index: 0;-->

<!--  .circle {-->
<!--    position: absolute;-->
<!--    border-radius: 50%;-->
<!--    opacity: 0.1;-->

<!--    &-1 {-->
<!--      width: 300px;-->
<!--      height: 300px;-->
<!--      background: linear-gradient(45deg, #0052d9, #409eff);-->
<!--      top: -100px;-->
<!--      left: -100px;-->
<!--      animation: float 8s infinite ease-in-out;-->
<!--    }-->

<!--    &-2 {-->
<!--      width: 200px;-->
<!--      height: 200px;-->
<!--      background: linear-gradient(135deg, #0052d9, #00a870);-->
<!--      bottom: -50px;-->
<!--      right: 10%;-->
<!--      animation: float 6s infinite ease-in-out reverse;-->
<!--    }-->

<!--    &-3 {-->
<!--      width: 150px;-->
<!--      height: 150px;-->
<!--      background: linear-gradient(225deg, #409eff, #0052d9);-->
<!--      top: 20%;-->
<!--      right: -50px;-->
<!--      animation: float 7s infinite ease-in-out;-->
<!--    }-->
<!--  }-->

<!--  .square {-->
<!--    position: absolute;-->
<!--    opacity: 0.08;-->
<!--    transform: rotate(45deg);-->

<!--    &-1 {-->
<!--      width: 100px;-->
<!--      height: 100px;-->
<!--      background: #0052d9;-->
<!--      bottom: 15%;-->
<!--      left: 10%;-->
<!--      animation: rotate 10s infinite linear;-->
<!--    }-->

<!--    &-2 {-->
<!--      width: 60px;-->
<!--      height: 60px;-->
<!--      background: #409eff;-->
<!--      top: 20%;-->
<!--      left: 20%;-->
<!--      animation: rotate 8s infinite linear reverse;-->
<!--    }-->
<!--  }-->

<!--  .dot-grid {-->
<!--    position: absolute;-->
<!--    width: 200px;-->
<!--    height: 200px;-->
<!--    bottom: 10%;-->
<!--    right: 15%;-->
<!--    background-image: radial-gradient(#0052d9 1px, transparent 1px);-->
<!--    background-size: 10px 10px;-->
<!--    opacity: 0.1;-->
<!--    animation: fade 4s infinite alternate;-->
<!--  }-->
<!--}-->

<!--/* 添加动画关键帧 */-->
<!--@keyframes float {-->
<!--  0%, 100% {-->
<!--    transform: translateY(0);-->
<!--  }-->
<!--  50% {-->
<!--    transform: translateY(-20px);-->
<!--  }-->
<!--}-->

<!--@keyframes rotate {-->
<!--  from {-->
<!--    transform: rotate(45deg);-->
<!--  }-->
<!--  to {-->
<!--    transform: rotate(405deg);-->
<!--  }-->
<!--}-->

<!--@keyframes fade {-->
<!--  from {-->
<!--    opacity: 0.05;-->
<!--  }-->
<!--  to {-->
<!--    opacity: 0.15;-->
<!--  }-->
<!--}-->

<!--/* 修改现有容器样式 */-->
<!--.container {-->
<!--  position: relative;-->
<!--  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);-->
<!--}-->

<!--.login-card {-->
<!--  position: relative;-->
<!--  z-index: 1;-->
<!--  backdrop-filter: blur(10px);-->
<!--  background: rgba(255, 255, 255, 0.95);-->
<!--  border: 1px solid rgba(255, 255, 255, 0.3);-->
<!--}-->

<!--/* 添加响应式适配 */-->
<!--@media screen and (max-width: 768px) {-->
<!--  .background-decoration {-->
<!--    .circle, .square {-->
<!--      transform: scale(0.7);-->
<!--    }-->

<!--    .dot-grid {-->
<!--      transform: scale(0.5);-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</style>-->

<!--<style scoped lang="scss">-->
<!--.container {-->
<!--  min-height: 100vh;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: center;-->
<!--  background-color: #f0f2f5;-->
<!--}-->

<!--.login-card {-->
<!--  display: flex;-->
<!--  background: white;-->
<!--  border-radius: 12px;-->
<!--  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);-->
<!--  overflow: hidden;-->
<!--  width: 1000px;-->
<!--  height: 600px;-->
<!--}-->

<!--.company-name {-->
<!--  padding: 20px;-->
<!--  color: #0052d9;-->
<!--  font-weight: bold;-->
<!--  position: absolute;-->
<!--  font-size: 24px;-->
<!--}-->

<!--.company-name span {-->
<!--  font-size: 16px;-->
<!--  color: #0052d9;-->
<!--}-->

<!--.login-form {-->
<!--  flex: 1;-->
<!--  padding: 40px;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: center;-->
<!--  justify-content: center;-->
<!--}-->

<!--.title {-->
<!--  font-size: 24px;-->
<!--  color: #333;-->
<!--  margin-bottom: 30px;-->
<!--}-->

<!--.social-login {-->
<!--  display: flex;-->
<!--  gap: 20px;-->
<!--  margin-bottom: 30px;-->
<!--}-->

<!--.social-btn {-->
<!--  width: 40px;-->
<!--  height: 40px;-->
<!--  border-radius: 50%;-->
<!--  border: none;-->
<!--  cursor: pointer;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: center;-->
<!--  color: white;-->
<!--}-->

<!--.facebook {-->
<!--  background: #3b5998;-->
<!--}-->
<!--.linkedin {-->
<!--  background: #0077b5;-->
<!--}-->
<!--.google {-->
<!--  background: #db4437;-->
<!--}-->

<!--.welcome-section {-->
<!--  background: #0052d9;-->
<!--  padding: 40px;-->
<!--  color: white;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: center;-->
<!--  justify-content: center;-->
<!--  text-align: center;-->
<!--  width: 40%;-->
<!--}-->

<!--.sign-in-btn {-->
<!--  width: 100%;-->
<!--  height: 50px;-->
<!--  margin-top: 20px;-->
<!--  background: #0052d9;-->
<!--  border: none;-->
<!--}-->

<!--.sign-up-btn {-->
<!--  border: 2px solid white;-->
<!--  color: white;-->
<!--  background: transparent;-->
<!--  padding: 12px 40px;-->
<!--  margin-top: 20px;-->
<!--}-->

<!--.form-footer {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  width: 100%;-->
<!--  margin: 20px 0;-->
<!--}-->

<!--.privacy-links {-->
<!--  margin-top: 20px;-->
<!--  font-size: 12px;-->
<!--  color: #666;-->
<!--}-->

<!--.privacy-links a {-->
<!--  color: #666;-->
<!--  text-decoration: none;-->
<!--}-->

<!--.dot {-->
<!--  margin: 0 8px;-->
<!--}-->

<!--.show-pwd {-->
<!--  cursor: pointer;-->
<!--  color: #889aa4;-->
<!--}-->

<!--.show-pwd:hover {-->
<!--  color: #409eff;-->
<!--}-->

<!--.input-group {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: space-between;-->
<!--  width: 100%;-->
<!--}-->

<!--.label {-->
<!--  width: 50px;-->
<!--}-->
<!--</style>-->

